<template>
  <PageSearch @search="reload" />
  <ele-page flex-table style="padding: 0 0 0 5px;">
    <!-- 表格 -->
    <ele-pro-table
      ref="tableRef"
      v-model:selections="selections"
      row-key="id"
      :columns="columns"
      :datasource="datasource"
      :show-overflow-tooltip="true"
      highlight-current-row
      :default-expand-all="false"
    >
      <template #toolbar>
        <el-button type="primary" class="ele-btn-icon" icon="IconElPrinter" plain @click="openPrint()">
          批量打印
        </el-button>
      </template>
      <template #status="{ row }">
        <el-tag v-if="row.status === 1">正常</el-tag>
        <el-tag v-else type="danger">停用</el-tag>
      </template>
      <template #action="{ row }">
        <el-link type="primary" underline="never" @click="openPrint(row)">
          打印
        </el-link>
      </template>
    </ele-pro-table>
    <PagePrint
      v-model="showPrint"
      :selectionIds="selectionIds"
      :warehouseId="warehouseId"
    />
  </ele-page>
</template>

<script setup>
import { ref } from 'vue'
import PagePrint from './print.vue'
import PageSearch from './search.vue'

const props = defineProps({
  warehouseId: Number,
})

/** 表格实例 */
const tableRef = useTemplateRef('tableRef')

/** 表格选中数据 */
const selections = ref([])

const selectionIds = ref([])

/** 是否显示打印弹窗 */
const showPrint = ref(false)

/** 表格列配置 */
const columns = ref([
  {
    type: 'selection',
    columnKey: 'selection',
    width: 40,
    align: 'center',
    fixed: 'left',
    reserveSelection: true,
    showOverflowTooltip: false,
  },
  {
    type: 'index',
    label: '序',
    width: 50,
    align: 'center',
    fixed: 'left',
  },
  {
    prop: 'name',
    label: '商品名称',
    minWidth: 160,
  },
  {
    prop: 'code',
    label: '商品编码',
    minWidth: 120,
    align: 'center',
  },
  {
    prop: 'supplier_name',
    label: '货主',
    minWidth: 120,
    align: 'center',
  },
  {
    prop: 'location',
    label: '库位',
    minWidth: 120,
    align: 'center',
    formatter: row => row.location.map(v => v.name).join('、'),
  },
  {
    prop: 'unit',
    label: '主单位',
    minWidth: 100,
    align: 'center',
  },
  {
    prop: 'unit',
    label: '辅助单位',
    minWidth: 120,
    align: 'center',
    showOverflowTooltip: true,
    formatter: row => row.unit_list?.map(v => v.unit).filter(d => d !== row.unit).join('、'),
  },
  {
    prop: 'status',
    label: '商品状态',
    width: 120,
    slot: 'status',
    align: 'center',
    formatter: row => row.status === 1 ? '正常' : '禁用',
  },
  {
    columnKey: 'action',
    label: '操作',
    fixed: 'right',
    align: 'center',
    slot: 'action',
    width: 80,
  },
])

/** 表格数据源 */
function datasource({ page, limit, where, orders }) {
  return utils.get('/common/productList', { ...where, ...orders, is_location: 1, warehouse_id: props.warehouseId, page, limit })
}

/** 搜索 */
function reload(where) {
  selections.value = []
  tableRef.value?.reload?.({ page: 1, where })
}

/** 打开打印弹窗 */
function openPrint(row) {
  selectionIds.value = row ? [row.id] : selections.value.map(v => v.id)
  showPrint.value = true
}

// 监听字典id变化
watch(
  () => props.warehouseId,
  () => {
    reload({})
  },
)
</script>
